<template>
  <div class="z-tab" :class="{'z-tab-auto': layout === 'auto', 'z-tab-left': layout === 'left', 'z-tab-linker': type === 'linker'}" v-bind="$attrs">
    <div
      v-for="(nav, index) in navs"
      :key="nav.active"
      class="z-tab_nav"
      :class="{'active': nav.active == active}"
      @click="changeTabNav(nav, index)"
    >
      {{ nav.label }}
    </div>
    <div class="z-tab-toolbar">
      <slot name="toolbar"></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="ZSlider">
import type { ZTabNav } from '@/types/zui/zui';

const emits = defineEmits(['change', 'update:active']);
const props = defineProps({
  navs: {
    type: Array<ZTabNav>,
    default: []
  },
  active: {
    type: [Number, String],
    default: 1
  },
  layout: {
    type: String,
    default: 'auto'
  },
  // tab类型 plain | linker
  type: {
    type: String,
    default: 'plain'
  }
});

// 切换 tab
const changeTabNav = (nav: ZTabNav, index: number): void => {
  emits('change', {
    nav, index
  });
  emits('update:active', nav.active);
};

defineExpose({
});
</script>

<style lang="scss" scoped>
.z-tab {
  border: 2px solid var(--z-border-def);
  height: var(--rem-54);
  line-height: var(--rem-54);
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding: var(--rem-5);
  border-radius: var(--rem-54);
  font-size: var(--rem-12);
  &.z-tab-linker{
    .z-tab_nav{
      &.active{
        color: var(--z-font-anti);
      }
    }
  }
  .z-tab-toolbar{
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
  }
  .z-tab_nav{
    height: var(--rem-40);
    line-height: var(--rem-40);
    text-align: center;
    cursor: pointer;
    border-radius: var(--rem-54);
    &.active{
      background-color: var(--bg-tab-active);
      color: var(--z-font-white);
    }
  }
  &.z-tab-auto{
    justify-content: space-between;
    flex-wrap: nowrap;
    .z-tab_nav{
      width: 100%;
    }
  }
  &.z-tab-left{
    justify-content: flex-start;
    .z-tab_nav{
      padding: 0 var(--rem-20);
    }
  }
  &.z-tab-linker{
    border: 0 none;
    .z-tab_nav{
      &.active{
        background: transparent;
      }
    }
  }
}
</style>
